<template>
    <div>
        <el-form-item>
        <el-button type="danger" :icon="Plus" @click="onSubmit()">新增</el-button>
        <!-- <el-button type="danger" @click="">保存</el-button>
        <el-button type="danger" @click="">撤销</el-button> -->
        <el-button type="danger" :icon="Delete" @click="">删除</el-button>
      </el-form-item>

        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="转种日期">
                <el-col :span="11" >
                    <el-date-picker v-model="form.entryDate" type="date" placeholder="请选择入职日期"
                        style="width: 280px" />
                </el-col>
            </el-form-item>
      <el-form-item label="单据号：" style="width: 150px">-- --</el-form-item>
      <el-form-item label="流水号：" style="width: 150px">-- --</el-form-item>
    </el-form>
    <!-- <br> -->
    <hr style="height:3px; background-color:indianred">

    <!-- 后裔转种信息表头 -->
    <div>
        <table class="bordered-table" width="100%" >
        <tr height="40" style="background-color:antiquewhite">
            <td width="150">编号</td>
            <td width="150">耳号</td>
            <td width="150">转入栋舍</td>
            <td width="150">转入栏位</td>
            <td width="150">当前栋舍</td>
            <td width="150">当前栏位</td>
            <td width="150">性别</td>
            <td width="150">转入日龄</td>
        </tr>
        <!-- 后裔转种信息添加 -->
        <tr v-for="(item,index) in form" :key="index">
            <td width="150">
                <el-input :value="index+1"></el-input>
            </td>
            <td width="150">
                <el-select v-model="item.basicInforId" placeholder="请选择" clearable @change="FanBedroom(item.basicInforId,index)">
                    <el-option
                    v-for="basic in BasicInformationList.filter((d:any)=>d.pigTypeId==3 && d.presentstatus==2)"
                    :key="basic.basicInforId"
                    :label="basic.earNumber"
                    :value="basic.basicInforId">
                    </el-option>
                </el-select>
            </td>
            <td width="150">
                {{item.turnBuilding}}
            </td>
            <td width="150">
                {{item.turnColumn}}
            </td>
            <td width="150">
                <el-select v-model="item.bedroomId" placeholder="请选择" @change="handlefield(item.bedroomId,index)" clearable>
                    <el-option v-for="bedroom in bedroomList" :key="bedroom.bedroomId" :label="bedroom.bedroomName" :value="bedroom.bedroomId" />
                </el-select>
            </td>
            <td width="150">
                <el-select v-model="item.fieldId" placeholder="请选择" clearable>
                    <el-option v-for="field in fieldList[index]" :key="field.fieldId" :label="field.fieldName" :value="field.fieldId" />
                </el-select>
            </td>
            <td width="150">
               <el-tag type="primary" v-if="item.gender==1">公</el-tag>
               <el-tag type="danger" v-else-if="item.gender==2">母</el-tag>
            </td>
            <td width="150">
                <el-input v-model="item.scionDay"></el-input>
            </td>
        </tr>
        </table>
    </div>
    <el-button type="danger" link :icon="Plus" @click="AddRow(true)">增行</el-button>
    <el-button type="danger" link  @click="delRow(false)">—减行</el-button>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive,ref} from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Plus, Delete } from "@element-plus/icons-vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

onMounted(()=>{
    GetBasicInformation();//耳号
    handleBedroom();//栋舍
})
//当前时间
const date=new Date();

const router = useRouter();
const form = reactive([{
    basicInforld: '',
    scionChangeDate:date.getFullYear()+'-'+(date.getMonth()+1).toString().padStart(2, '0')+'-'+ date.getDate().toString().padStart(2, '0'),
    turnBuilding: '',
    turnColumn: '',
    bedroomd: '',
    fieldId:'',
    gender: '',
    scionDay: '',
    isScion: 0,
    createdOwner:localStorage.getItem('userName'),
    createdTime:new Date(),
    updateOwner:'',
    updatedTime: null,
    examineOwner: '',
    examineTime: null,
}])
//新增行
const AddRow = () => {
    form.push({
        basicInforld: '',
        scionChangeDate:date.getFullYear()+'-'+(date.getMonth()+1).toString().padStart(2, '0')+'-'+ date.getDate().toString().padStart(2, '0'),
        turnBuilding: '',
        turnColumn: '',
        bedroomd: '',
        fieldId:'',
        gender: '',
        scionDay: '',
        isScion: 0,
        createdOwner:localStorage.getItem('userName'),
        createdTime:new Date(),
        updateOwner:'',
        updatedTime: null,
        examineOwner: '',
        examineTime: null,
    })
    console.log(form);
};

//减行
const delRow = () => {
    if(form.length>0)
    {
        form.pop();
    }
};
//后裔转种添加
const onSubmit = () => {
    console.log(form);
    const obj={
        scionChanges:form
    }
    axios.post(apiBedinUrl+'/api/ScionChanges/AddScionChange',obj)
        .then(res => {
            if (res.data.code == 0) {
                console.log("后裔转种添加", res.data);
                ElMessage.success('后裔转种信息添加成功');
                delRow();
                router.push('/QueryScionChanges');
            }
            else {
                ElMessage.error('后裔转种信息添加失败');
                return;
            }
        })
}

const bedroomField:any=reactive({
    gender:'',
    turnBuilding: '',
    turnColumn: '',
    // pigNum:0
})
//获取栏位
const FanBedroom=(basicInforId:number,index:number)=>{
    axios.post(apiBedinUrl+'/api/Basics/SearchBedroomField',{
        basicInforId:basicInforId
    })
    .then(res=>{
        console.log("栋舍信息",res.data);
        //给栋舍 栏位 性别赋值
        bedroomField.turnBuilding = res.data.data.bedroomName;
        bedroomField.turnColumn = res.data.data.fieldName;
        bedroomField.gender = res.data.data.gender;
        // bedroomField.pigNum = res.data.data.scionChangeDate;
        console.log(bedroomField);
        //根据下标进行复制
        form[index].turnBuilding = bedroomField.turnBuilding;
        form[index].turnColumn = bedroomField.turnColumn;
        form[index].gender = bedroomField.gender;
        console.log(form);
    })
}

//猪只信息耳号列表
const BasicInformationList = ref([]);
const GetBasicInformation = () => {
    axios.post(apiBedinUrl+'/api/Infancies/GetBasicInformation', {})
        .then(res => {
            console.log("猪只信息耳号", res.data.data);
            BasicInformationList.value = res.data.data;
        })
}

//响应式数据 获取栋舍
const condition=reactive({
    pageIndex:1,
    pageSize:100,
    bedroomTypeId:0,
    bedroomName:'',
    personName:''
})
//获取栋舍
const bedroomList:any=ref([])
const handleBedroom=()=>{
    axios.post(apiUrl+'/api/BedRoom/ShowBedroom',{
        pageIndex: condition.pageIndex,
        pageSize: condition.pageSize,
        bedroomTypeId: condition.bedroomTypeId,
        bedroomName: condition.bedroomName,
        personName:condition.personName
    }).then(res=>{
        bedroomList.value=res.data.data.list
    })
}

//获取栏位
const fieldList:any=ref([])
const handlefield=(id:number,index:number)=>{
    form[index].fieldId=''
    axios.post(apiUrl+'/api/BedRoom/GetBrdroomIdField',{
        bedroomId:id
    }).then(res=>{
        fieldList.value[index]=res.data.data;
        console.log("栏位",fieldList.value[index],index);
    })
}
</script>

<style scoped>
.bordered-table {
  border-collapse: collapse; /* 合并相邻单元格的边框 */
  width: 100%;
}

.bordered-table th,
.bordered-table td {
  border: 1px solid rgb(41, 41, 41); /* 为表头和表格单元格添加边框 */
  padding: 8px; /* 可选，为单元格内容添加内边距 */
  text-align: center; /* 可选，设置单元格内容的对齐方式 */
}

.bordered-table tr:first-child th {
  border-bottom: 2px solid black; /* 可选，为表头添加更粗的底部边框 */
}
</style>
